<template>
  <div class="order-box">
    <van-row class="order-box-top">
      <van-col span="24">
        <van-button
          size="large"
          class="order-btn"
          @click="onClickPublishRecord"
        >发布记录</van-button>
      </van-col>
    </van-row>
    <van-row class="order-box-bottom">
      <van-col span="10">
        <van-button
          size="large"
          class="order-btn"
          @click="onClickBuyOrder"
        >买群订单</van-button>
      </van-col>
      <van-col span="10" offset="4">
        <van-button
          size="large"
          class="order-btn"
          @click="onClickComplaintOrder"
        >投诉记录</van-button>
      </van-col>
    </van-row>

    <!-- 发布记录 -->
    <van-popup
      v-model="showPublishRecord"
      class="pop-container"
      position="right"
      :overlay="false"
    >
      <van-nav-bar
        title="发布记录"
        left-text="返回"
        left-arrow
        @click-left="onClickRecordLeft"
      />
      <template v-for="item in publishData">
        <div class="publish-item" :data-id="item.id">
          <div class="publish-item-title">
            <span class="title">{{ item.title }}</span>
            <span class="state" :class="item.color">{{ item.state }}</span>
          </div>
          <div class="publish-item-content">
            {{ item.introduce }}
          </div>
          <div class="publish-item-label">
            <span v-for="labelItem in item.label">{{ labelItem }}</span>
          </div>
          <div class="publish-item-bottom">
            <div class="publish-item-time">
              发布时间：{{ item.time }}
            </div>
            <div class="publish-item-lacation">
              发布地点：{{ item.location }}
            </div>
            <van-button class="publish-item-delete" @click.stop="onClickDelete">
              删除
            </van-button>
          </div>
          <div v-if="item.rejection" class="publish-item-reason">
            <span class="title">{{ item.rejectionTitle }}</span>
            <span class="state" :class="item.color">{{ item.rejectionReson }}</span>
          </div>
        </div>
      </template>
    </van-popup>

    <!-- 买群订单 -->
    <van-popup
      v-model="showBuyOrder"
      class="pop-container"
      position="right"
      :overlay="false"
    >
      <van-nav-bar
        title="买群订单"
        left-text="返回"
        left-arrow
        @click-left="onClickBuyLeft"
      />
      <template v-for="item in payData">
        <div class="buy-item" data-id="item.id">
          <div class="buy-item-title">
            <div class="title">{{ item.title }}</div>
            <div class="state" :class="item.color">{{ item.state }}</div>
          </div>
          <div class="buy-item-content">{{ item.introduce }}
          </div>
          <div class="buy-item-bottom">
            <div class="price">{{ item.price }}</div>
            <div class="location">来自：{{ item.location }}</div>
          </div>
          <div v-if="!item.type" class="buy-item-btns" >
            <van-button
              class="delete"
              @click="onClickBuyDelete"
            >删除</van-button>
            <van-button
              class="cancel"
              @click="onClickCancelOrder"
            >取消订单</van-button>
            <van-button
              class="pay"
              @click="onClickGoPay"
            >去支付</van-button>
          </div>
          <div v-else class="buy-item-btns" >
            <van-button
              class="delete"
              @click="onClickBuyDelete"
            >删除</van-button>
            <van-button
              class="cancel"
              @click="onClickComplain"
            >投诉</van-button>
            <van-button
              class="pay"
              @click="onClickCheckDetail"
            >查看详情</van-button>
          </div>
        </div>
      </template>
    </van-popup>

    <!-- 投诉订单 -->
    <van-popup
      v-model="showComplaintOrder"
      class="pop-container"
      position="right"
      :overlay="false"
    >
      <van-nav-bar
        title="投诉订单"
        left-text="返回"
        left-arrow
        @click-left="onClickComplaintLeft"
      />
      <template v-for="item in complaintData">
        <div class="buy-item" data-id="item.id">
          <div class="buy-item-title">
            <div class="title">{{ item.title }}</div>
            <div class="state" :class="item.color">{{ item.state }}</div>
          </div>
          <div class="buy-item-content">{{ item.introduce }}
          </div>
          <div class="buy-item-bottom">
            <div class="price">{{ item.price }}</div>
            <div class="location">来自：{{ item.location }}</div>
          </div>
          <div class="buy-item-btns" >
            <van-button
              class="delete"
              @click="onClickComplaintDelete"
            >删除</van-button>
          </div>
        </div>
      </template>
    </van-popup>


    <!-- 投诉页面 -->
    <van-popup
      v-model="showComplaintPage"
      class="pop-container"
      position="right"
      :overlay="false"
    >
      <van-nav-bar
        title="投诉"
        left-text=""
        left-arrow
        @click-left="onClickComplaintPageLeft"
      />
      <van-field
        v-model="complaintForm.message"
        label="投诉描述"
        type="textarea"
        placeholder="请输入投诉描述"
        rows="5"
        autosize
      />
      <van-uploader
        :after-read="onReadImg"
        accept="image/gif, image/jpeg, image/png, image/jpg"
        class="upload-img-btn"
        :disabled="isUploadDisabled"
      >
        <span>上传图片，不超过5张</span>
      </van-uploader>
      <div class="complaint-img">
        <template v-for="(item, index) in complaintForm.img">
          <img :src="item.content" @click="onDeleteImg" :data-index="index">
        </template>
      </div>
      <div class="complaint-bottom">
        <van-button size="large" @click="onClickComplaintSubmit">提交</van-button>
        <p>客服核实投诉情况后将安排退款</p>
      </div>
    </van-popup>
  </div>
</template>

<script>
  import {
    NavBar,
    Cell,
    CellGroup,
    Field,
    Button,
    Row,
    Col,
    Search,
    Tabbar,
    TabbarItem,
    Icon,
    Popup,
    Dialog,
    Uploader
  } from 'vant';
  export default {
    components: {
      [NavBar.name]: NavBar,
      [Cell.name]: Cell,
      [CellGroup.name]: CellGroup,
      [Field.name]: Field,
      [Button.name]: Button,
      [Row.name]: Row,
      [Col.name]: Col,
      [Search.name]: Search,
      [Tabbar.name]: Tabbar,
      [TabbarItem.name]: TabbarItem,
      [Icon.name]: Icon,
      [Popup.name]: Popup,
      [Dialog.name]: Dialog,
      [Uploader.name]: Uploader,
    },
    data() {
      return {
        showPublishRecord: false,
        showBuyOrder: false,
        showComplaintOrder: false,
        showComplaintPage: false,
        isUploadDisabled: false,
        publishData: [{
          id: '1',
          title: '这里是群名称',
          state: '待发布',
          color: 'orange',
          introduce: '这里是群介绍，这里是群介绍，这里是群介绍，这里是群介绍，这里是群介绍',
          label: ['标签1', '标签2', '标签3', '标签4', '标签5'],
          time: '2018/6/6 12:20',
          location: '大宁德必易园'
        }, {
          id: '1',
          title: '这里是群名称',
          state: '待审核',
          color: 'blue',
          introduce: '这里是群介绍，这里是群介绍，这里是群介绍，这里是群介绍，这里是群介绍',
          label: ['标签1', '标签2', '标签3', '标签4', '标签5'],
          time: '2018/6/6 12:20',
          location: '大宁德必易园'
        }, {
          id: '1',
          title: '这里是群名称',
          state: '已驳回',
          color: 'orange',
          introduce: '这里是群介绍，这里是群介绍，这里是群介绍，这里是群介绍，这里是群介绍',
          label: ['标签1', '标签2', '标签3', '标签4', '标签5'],
          time: '2018/6/6 12:20',
          location: '大宁德必易园',
          rejection: true,
          rejectionTitle: '驳回原因',
          rejectionReson: '群信息虚假',
        }, {
          id: '1',
          title: '这里是群名称',
          state: '已上架',
          color: 'green',
          introduce: '这里是群介绍，这里是群介绍，这里是群介绍，这里是群介绍，这里是群介绍',
          label: ['标签1', '标签2', '标签3', '标签4', '标签5'],
          time: '2018/6/6 12:20',
          location: '大宁德必易园',
          rejection: true,
          rejectionTitle: '已购买人数：10',
          rejectionReson: '浏览量：200',
        }, {
          id: '1',
          title: '这里是群名称',
          state: '已上架',
          color: 'red',
          introduce: '这里是群介绍，这里是群介绍，这里是群介绍，这里是群介绍，这里是群介绍',
          label: ['标签1', '标签2', '标签3', '标签4', '标签5'],
          time: '2018/6/6 12:20',
          location: '大宁德必易园',
          rejection: true,
          rejectionTitle: '下架原因',
          rejectionReson: '投诉下架',
        }],
        payData: [{
          id: '1',
          title: '这里是群名称',
          state: '待支付',
          type: false,
          color: 'orange',
          introduce: '这里是群介绍，这里是群介绍，这里是群介绍，这里是群介绍，这里是群介绍',
          price: '50多多币',
          location: '大宁德必易园'
        }, {
          id: '1',
          title: '这里是群名称',
          state: '已支付',
          type: true,
          color: 'perple',
          introduce: '这里是群介绍，这里是群介绍，这里是群介绍，这里是群介绍，这里是群介绍',
          price: '50多多币',
          location: '大宁德必易园'
        }],
        complaintData: [{
          id: '1',
          title: '这里是群名称',
          state: '投诉处理中',
          type: false,
          color: 'orange',
          introduce: '这里是群介绍，这里是群介绍，这里是群介绍，这里是群介绍，这里是群介绍',
          price: '50多多币',
          location: '大宁德必易园'
        }, {
          id: '1',
          title: '这里是群名称',
          state: '已处理',
          type: true,
          color: 'perple',
          introduce: '这里是群介绍，这里是群介绍，这里是群介绍，这里是群介绍，这里是群介绍',
          price: '50多多币',
          location: '大宁德必易园'
        }],
        complaintForm: {
          message: '',
          img: []
        }
      }
    },
    mounted() {
      // 进入该页面 修改父页面的index
      this.$parent.activeIndex = 2;
    },
    methods: {
      onClickPublishRecord() {
        this.showPublishRecord = !this.showPublishRecord;
      },
      onClickRecordLeft() {
        this.showPublishRecord = !this.showPublishRecord;
      },
      onClickBuyOrder() {
        this.showBuyOrder = !this.showBuyOrder;
      },
      onClickBuyLeft() {
        this.showBuyOrder = !this.showBuyOrder;
      },
      onClickComplaintLeft() {
        this.showComplaintOrder = !this.showComplaintOrder;
      },
      onClickComplaintOrder() {
        this.showComplaintOrder = !this.showComplaintOrder;
      },
      onClickComplaintPageLeft() {
        this.showComplaintPage = !this.showComplaintPage;
      },
      onClickDelete(e) {
        // 点击删除按钮
        Dialog.confirm({
          title: '删除订单',
          message: '订单删除后无法撤回，是否确认继续？'
        }).then(() => {
          // on confirm
          // 点击删除时 改订单的id
          let id = e.target.parentElement.parentElement.dataset.id;
        }).catch(() => {
          // on cancel
        });
      },
      onClickBuyDelete(e) {
        // 点击删除按钮
        Dialog.confirm({
          title: '删除订单',
          message: '订单删除后无法撤回，是否确认继续？'
        }).then(() => {
          // on confirm
          // 点击删除时 改订单的id
          let id = e.target.parentElement.parentElement.dataset.id;
        }).catch(() => {
          // on cancel
        });
      },
      onClickComplaintDelete(e) {
        // 点击删除按钮
        Dialog.confirm({
          title: '删除订单',
          message: '订单删除后无法撤回，是否确认继续？'
        }).then(() => {
          // on confirm
          // 点击删除时 改订单的id
          let id = e.target.parentElement.parentElement.dataset.id;
        }).catch(() => {
          // on cancel
        });
      },
      onClickCancelOrder(e) {
        // 点击取消订单按钮
        Dialog.confirm({
          title: '提示',
          message: '是否确认取消订单？'
        }).then(() => {
          // on confirm
          // 点击删除时 改订单的id
          let id = e.target.parentElement.parentElement.dataset.id;
        }).catch(() => {
          // on cancel
        });
      },
      onClickGoPay(e) {
        // 点击支付按钮
      },
      onClickComplain(e) {
        // 点击投诉按钮
        this.showComplaintPage = !this.showComplaintPage;
      },
      onClickCheckDetail(e) {
        // 点击查看详情按钮
      },
      onReadImg(e) {
        this.complaintForm.img.push(e);

        if(this.complaintForm.img.length >= 5) {
          this.isUploadDisabled = true;
        }
      },
      onDeleteImg(val) {
        let thisImg = val.target;
        let index = thisImg.dataset.index;

        Dialog.confirm({
          message: '是否删除选中图片？'
        }).then(() => {
          // on confirm
          this.complaintForm.img.splice(index, 1);
          this.isUploadDisabled = false;
        }).catch(() => {
          // on cancel
        });
      },
      onClickComplaintSubmit() {
        // 点击投诉的提交按钮
        console.log(this.complaintForm);
      }
    }
  }
</script>

<style scoped="scoped">
.orange {
  color: #FF9800;
}
.blue {
  color: #0076FF;
}
.green {
  color: #009688;
}
.red {
  color: #E51C23;
}
.perple {
  color: #3F51B5;
}
.order-box {
  height: 100%;
  padding: 0 30px;
  background-color: #F0F1F2;
}
.order-box-top {
  padding-top: 100px;
  margin-bottom: 55px;
}
.order-btn {
  line-height: 20px;
  color: rgba(3, 3, 3, 1);
  font-size: 14px;
}
.pop-container {
  width: 100%;
  height: 100%;
  background-color: #F0F1F2;
}
.publish-item,
.buy-item {
  position: relative;
  width: calc(100% - 36px);
  padding: 18px;
  background-color: #fff;
  margin-bottom: 10px;
}
.publish-item-title,
.buy-item-title {
  line-height: 30px;
  height: 30px;
}
.publish-item-title .title,
.buy-item-title .title{
  float: left;
  color: rgba(16, 16, 16, 1);
  font-size: 16px;
}
.publish-item-title .state,
.buy-item-title .state{
  float: right;
  /*color: #FF9800;*/
}
.publish-item-content,
.buy-item-content {
  color: #888888;
  font-size: 12px;
  line-height: 16px;
  height: 32px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: box;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.publish-item-label {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin: 10px 0;
}
.publish-item-label span {
  line-height: 22px;
  border-radius: 10px;
  background-color: rgba(217, 217, 217, 1);
  color: rgba(16, 16, 16, 1);
  font-size: 12px;
  text-align: center;
  padding: 5px;
  margin-right: 10px;
}
.publish-item-time,
.publish-item-lacation {
  line-height: 24px;
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
}
.publish-item-delete {
  position: absolute;
  bottom: 0;
  right: 0;
}
.publish-item-bottom {
  position: relative;
}
.publish-item-reason {
  margin-top: 10px;
  line-height: 20px;
  height: 20px;
}
.publish-item-reason .title {
  color: rgba(0, 0, 0, 1);
  font-size: 14px;
  float: left;
}
.publish-item-reason .state {
  font-size: 14px;
  float: right;
}
.buy-item-bottom {
  line-height: 30px;
  height: 30px;
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
}
.buy-item-bottom .price {
  float: left;
}
.buy-item-bottom .location {
  float: right;
}
.buy-item-btns {
  text-align: right;
}
.upload-img-btn {
  line-height: 20px;
  color: rgba(63, 81, 181, 1);
  font-size: 14px;
  padding: 15px;
}
.complaint-img img{
  width: 61px;
  height: 61px;
  margin-left: 10px;
  margin-bottom: 10px;
}
.complaint-bottom {
  position: absolute;
  bottom: 10px;
  width: calc(100% - 40px);
  padding: 20px;
  text-align: center;
}
.complaint-bottom .van-button {
  background-color: #000;
  color: #fff;
  border-radius: 5px;
}
.complaint-bottom p {
  line-height: 20px;
  color: rgba(16, 16, 16, 1);
  font-size: 13px;
  margin-top: 10px;
}
</style>